<!--
 * @Author: Jason Liu
 * @Date: 2025-03-17 17:33:27
 * @Desc: 
-->
<!--
 * @Author: Xiao Xiao
 * @Date: 2023-04-23 15:10:41
 * @Desc: 
-->
<template>
  <a-modal
    v-model="isView"
    title="指标选择"
    @ok="changeData"
    cancelText="取消"
    okText="确定"
    :destroy-on-close="true"
    :loading="loading"
  >
    <a-input-search @search="searchData" placeholder="请输入指标关键字"> </a-input-search>

    <div class="app_indicator_list">
      <vxe-table
        :key="`app_indicator_list${pageKey}`"
        show-overflow
        show-header-overflow
        resizable
        :loading="loading"
        :column-config="{ resizable: true }"
        :cell-config="{ height: 42, padding: '2px 8px' }"
        :row-config="{ isHover: true }"
        :data="dataList"
        border="none"
        :show-header="false"
        height="auto"
        :tree-config="{
          expandAll: false,
          transform: true,
          rowField: 'id',
          parentField: 'pid',
          indent: 8,
        }"
        :row-class-name="cellClassName"
        :scroll-y="{ enabled: true, gt: 11 }"
      >
        <vxe-column title="指标编码" tree-node>
          <template #default="{ row }">
            <div class="nemu_info" @click="cellClickEvent(row)">
              <win-icon v-if="row.modelType != 'quota'" type="icon_topic" />
              <span v-if="row.modelType == 'quota'">{{ row.code }}</span>  {{ row.name }}
            </div>
          </template>
        </vxe-column>
        <template #empty>
          <a-empty
            :image-style="{
              display: 'flex',
              height: '80px',
            }"
          >
            <template slot="description"> 暂无菜单信息 </template>
          </a-empty>
        </template>
      </vxe-table>
    </div>
  </a-modal>
</template>

<script type="text/javascript" src="./service.js"></script>

<style lang="less" scoped>
.app_indicator_list {
  margin-top: 8px;
  height: 420px;
  /deep/.vxe-table {
    .vxe-body--row {
      .nemu_info {
        line-height: 42px;
        font-size: 14px;
        color: #000000;
        overflow: hidden;
        text-overflow: ellipsis;
        img {
          width: 14px;
          height: 14px;
          vertical-align: -0.1em;
          position: relative;
        }
      }
      &.active_row {
        position: relative;
        .nemu_info {
          color: #ffffff;
        }
        .vxe-cell--wrapper {
          border-radius: 8px;
          background: linear-gradient(180deg, #2d5afa 0%, #5175f4 100%);
        }
      }
    }
  }
}
</style>
